<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <!-- 添加按钮 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <tree-table class="treeTable" :data="goodscatelist" :columns="columns" :selection-type="false" 
            :expand-type="false" show-index index-text="#" border :show-row-hover="false">
                <!-- 是否有效 -->
                <template slot='isok' slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>
                <!-- 排序 -->
                <template slot='order' slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.cat_level===1" type='success'>二级</el-tag>
                    <el-tag size="mini" v-else type='warning'>三级</el-tag>
                </template>
                <!-- 按钮 -->
                <template slot='opt' slot-scope="scope">
                    <el-button type='primary' icon='el-icon-edit' size='mini' @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                    <el-button type='danger' icon='el-icon-delete' size='mini'  @click="deleteEditCate(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页 -->
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryGoodsCate.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryGoodsCate.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
        </el-card>
        <!-- 添加分类的Dialog对话框 -->
        <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%"
        @close="addCateDialogClosed"
        >
            <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称:" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类:">
                    <!-- options用来指定数据源 -->
                    <!-- props用来指定配置对象 -->
                    <el-cascader
                        v-model="selectedKeys"
                        :options="parentCateList"
                        :props="cascaderProps"
                        @change="parentCateChange"
                        size="mini"
                        clearable
                    >
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改分类的Dialog对话框 -->
        <el-dialog
        title="提示"
        :visible.sync="editCateDialogVisible"
        width="50%"
        @close="editCateDialogClosed"
        >
            <el-form ref="editCateRef" :model="editCateForm" :rules="editCateRules" label-width="80px">
                <el-form-item label="分类名称"  prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeEditCateDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        created(){
            this.getGoodsCateList()
        },
        data(){
            return{
                queryGoodsCate:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                //商品分类数据
                goodscatelist:[],
                //总数据条数
                total:0,
                //为table指定列的定义
                columns:[
                    {
                        label:'分类名称',
                        prop:'cat_name'
                    },
                    {
                        label:'是否有效',
                        //表示将当前列设为模板页
                        type:'template',
                        //表示当前这一列使用的模板名称
                        template:'isok'
                    },                    
                    {
                        label:'排序',
                        //表示将当前列设为模板页
                        type:'template',
                        //表示当前这一列使用的模板名称
                        template:'order'
                    },
                                        {
                        label:'操作',
                        //表示将当前列设为模板页
                        type:'template',
                        //表示当前这一列使用的模板名称
                        template:'opt'
                    }
                ],
                //添加弹出框的显示与隐藏
                addCateDialogVisible:false,
                //添加表单的数据绑定对象
                addCateForm:{
                    cat_name:'',
                    //父级分类的id
                    cat_pid: 0,
                    //分类的等级默认添加的时1级分类
                    cat_level: 0 
                },
                //添加表单的校验规则对象
                addCateRules:{
                    cat_name:[
                        {required:true,message:'请输入分类名称',tigger:'blur'}
                    ]
                },
                //父级分类的列表
                parentCateList:[],
                //级联选择器的配置对象
                cascaderProps:{ 
                    expandTrigger: 'hover',
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    checkStrictly: true
                },
                //选中父级分类的id数组
                selectedKeys:[],
                //修改对话框的显示与隐藏
                editCateDialogVisible:false,
                //修改表单的数据绑定对象
                editCateForm:{},
                //保存编辑按钮的id
                editId:'',
                //修改表单的校验规则对象
                editCateRules:{
                    cat_name:[
                        {required:true,message:'请输入分类名称',tigger:'blur'}
                    ]
                },
            }
        },
        methods:{
            async getGoodsCateList(){
                var {data:res}=await this.$http.get('categories',{params:this.queryGoodsCate})
                if(res.meta.status!==200) return this.$message.error('获取商品分类失败')
                this.goodscatelist=res.data.result
                this.total=res.data.total
            },
            //一页显示几条
            handleSizeChange(newSize){
                this.queryGoodsCate.pagesize=newSize
                this.getGoodsCateList()
            },
            //第几页时触发
            handleCurrentChange(newNum){
                this.queryGoodsCate.pagenum=newNum
                this.getGoodsCateList()
            },
            //添加对话框的事件处理函数
            showAddCateDialog(){
                //先获取父级分类的数据列表
                this.getParentCateList()
                // console.log(this.parentCateList);
                this.addCateDialogVisible=true
            },
            //  获取父级分类的数据列表
            async getParentCateList(){
                const {data:res}=await this.$http.get('categories',{params:{type:2}})
                if(res.meta.status!==200) return this.$message.error('获取父级分类数据失败')
                this.parentCateList=res.data
            },
            //级联选择框变化就触发的
            parentCateChange(){
                //selectedKeys.length>0选中了父级分类
                if(this.selectedKeys.length>0){
                    //父级分类的id
                    this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                    //为当前分类的等级赋值
                    this.addCateForm.cat_level=this.selectedKeys.length
                    return
                }else{
                    this.addCateForm.cat_pid=0
                    this.addCateForm.cat_level=0
                }
            },
            //点击按钮添加新的分类
            addCate(){
                this.$refs.addCateRef.validate(async valid=>{
                    if(!valid) return
                    const {data:res}=await this.$http.post('categories',this.addCateForm)
                    if(res.meta.status!==201) return this.$message.error('添加分类失败')
                    this.getGoodsCateList()
                    this.$message.success('添加分类成功')
                    this.addCateDialogVisible=false
                })
            },
            //关闭新增对话框事件,重置表单数据
            addCateDialogClosed(){
                this.$refs.addCateRef.resetFields()
                this.selectedKeys=[]
                //除了将选中的数组清空还要将赋值的父级id和类清空
                this.addCateForm.cat_pid=0
                this.addCateForm.cat_level=0
            },
            // //根据id查询对应的分类
            async getCateById(){
                const {data:res}=await this.$http.get('categories/'+ this.editId)
                if(res.meta.status!==200) return this.$message.error('查询用户失败')
                this.editCateForm=res.data
                console.log(this.editCateForm);
            },
            //编辑对话框弹出事件
            async showEditCateDialog(id){
                this.editId=id
                this.getParentCateList()
                const {data:res}=await this.$http.get('categories/'+ this.editId)
                if(res.meta.status!==200) return this.$message.error('查询用户失败')
                this.editCateForm=res.data
                this.editCateDialogVisible=true
            },
            //级联选择器内容改变时的事件
            async changeEditCateDialog(){
                console.log(this.editId);
                const {data:res}=await this.$http.put('categories/'+this.editId,{cat_name:this.editCateForm.cat_name})
                if(res.meta.status!==200) return this.$message.error('修改用户失败')
                this.getGoodsCateList()
                this.$message.success('修改用户成功')
                this.editCateDialogVisible=false
            },
            //关闭修改信息对话框
            editCateDialogClosed(){
                this.$refs.editCateRef.resetFields()
            },
            //删除商品分类
            async deleteEditCate(id){
                const {data:res}=await this.$http.delete('categories/'+id)
                if(res.meta.status!==200)return this.$message.error('删除用户失败')
                this.$message.error('删除用户成功')
                this.getGoodsCateList()
            }
        }
    }
</script>

<style lang="less" scoped>
    .treeTable{
        margin-top: 15px;
    }
    .el-cascader{
        width: 100%;
    }
</style>